---
title: Autoplay
description: Learn how to use the Autoplay plugin for Embla Carousel
order: 0
date: 2021-03-13
---

import { Tabs } from 'components/Tabs/Tabs'
import { TabsItem } from 'components/Tabs/TabsItem'
import { TABS_PACKAGE_MANAGER } from 'consts/tabs'
import { Autoplay } from 'components/Examples/Plugins/Autoplay'

# Autoplay

<RepositoryLink to="https://github.com/davidjerleke/embla-carousel/tree/master/packages/embla-carousel-autoplay">
  View plugin on GitHub
</RepositoryLink>

This plugin is used to extend Embla Carousel with **autoplay** functionality.

---

## Example

<Autoplay />

## Installation

Start by installing the **npm package** and save it to your dependencies:

<Tabs groupId={TABS_PACKAGE_MANAGER.GROUP_ID}>
  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.CDN}>

    ```html
    <script src="https://unpkg.com/embla-carousel-autoplay/embla-carousel-autoplay.umd.js"></script>
    ```

  </TabsItem>
  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.NPM}>

    ```shell
    npm install embla-carousel-autoplay --save
    ```

  </TabsItem>
  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.YARN}>

    ```shell
    yarn add embla-carousel-autoplay
    ```

  </TabsItem>
</Tabs>

## Options

Below follows an exhaustive **list of all** `Autoplay` **options** and their default values.

---

### delay

Type: <BrandPrimaryText>`number | (scrollSnapList: number[], emblaApi: EmblaCarouselType) => number[]`</BrandPrimaryText>  
Default: <BrandSecondaryText>`4000`</BrandSecondaryText>

Choose a delay between transitions in milliseconds. If you pass a number, the same delay will be **applied to all transitions**. If you pass a function, you can return an array of numbers based on the `scrollSnapList` parameter and set **different delays for each scroll snap**.

---

### jump

Type: <BrandPrimaryText>`boolean`</BrandPrimaryText>  
Default: <BrandSecondaryText>`false`</BrandSecondaryText>

When set to true `true`, autoplay will do instant slide transitions when advancing.

---

### playOnInit

Type: <BrandPrimaryText>`boolean`</BrandPrimaryText>  
Default: <BrandSecondaryText>`true`</BrandSecondaryText>

If set to `false`, you'll have to start autoplay manually by calling the [play](/plugins/autoplay/#play) method. It's useful to set this to `false` when you want full control over the timing. For example, when building an autoplay progress bar.

---

### stopOnInteraction

Type: <BrandPrimaryText>`boolean`</BrandPrimaryText>  
Default: <BrandSecondaryText>`true`</BrandSecondaryText>

If set to `false`, autoplay will not be disabled after drag interactions, and it will restart every time after an interaction.

---

### stopOnMouseEnter

Type: <BrandPrimaryText>`boolean`</BrandPrimaryText>  
Default: <BrandSecondaryText>`false`</BrandSecondaryText>

When enabled, autoplay will stop when a mouse pointer enters the Embla Carousel container. If [stopOnInteraction](/plugins/autoplay/#stoponinteraction) is also `false`, autoplay will resume when the mouse leaves the carousel container.

---

### stopOnFocusIn

Type: <BrandPrimaryText>`boolean`</BrandPrimaryText>  
Default: <BrandSecondaryText>`true`</BrandSecondaryText>

When enabled, autoplay will stop when a focusable element inside the carousel recieves focus. If [stopOnInteraction](/plugins/autoplay/#stoponinteraction) is `false`, autoplay will resume when the user leaves focus.

---

### stopOnLastSnap

Type: <BrandPrimaryText>`boolean`</BrandPrimaryText>  
Default: <BrandSecondaryText>`false`</BrandSecondaryText>

If this parameter is enabled, autoplay will stop when it reaches last slide.

---

### rootNode

Type: <BrandPrimaryText>`(emblaRoot: HTMLElement) => HTMLElement | null`</BrandPrimaryText>  
Default: <BrandSecondaryText>`null`</BrandSecondaryText>

The **node** that should **respond** to user **interactions** like [stopOnMouseEnter](/plugins/autoplay/#stoponmouseenter) and [stopOnInteraction](/plugins/autoplay/#stoponinteraction). If this is omitted, the node that wraps the Embla Carousel will be used as default.

---

## Methods

Below follows an exhaustive **list of all** `Autoplay` **methods** with their respective parameters and return values.

---

### play

Parameters: <BrandPrimaryText>`jump?: boolean`</BrandPrimaryText>  
Returns: <BrandSecondaryText>`void`</BrandSecondaryText>

Start autoplay. Set the **jump** parameter to `true` when you want autoplay to do instant slide transitions when advancing. Please note that providing a value to this method vill override the [jump](/plugins/autoplay/#jump) option.

---

### stop

Parameters: <BrandPrimaryText>`none`</BrandPrimaryText>  
Returns: <BrandSecondaryText>`void`</BrandSecondaryText>

Stop autoplay.

---

### reset

Parameters: <BrandPrimaryText>`none`</BrandPrimaryText>  
Returns: <BrandSecondaryText>`void`</BrandSecondaryText>

Resets the timer and starts over. This will only take effect if autoplay is already active. If autoplay is stopped, this method won't do anything.

---

### isPlaying

Parameters: <BrandPrimaryText>`none`</BrandPrimaryText>  
Returns: <BrandSecondaryText>`boolean`</BrandSecondaryText>

Returns a boolean whether autoplay is playing or not.

---

### timeUntilNext

Parameters: <BrandPrimaryText>`none`</BrandPrimaryText>  
Returns: <BrandSecondaryText>`number | null`</BrandSecondaryText>

If the autoplay timer is active, this will return a number representing the time left until the autoplay scrolls to the next snap. If the timer is not active, this will return `null`. Use this together with the [autoplay:timerset](/plugins/autoplay/#autoplaytimerset) and [autoplay:timerstopped](/plugins/autoplay/#autoplaytimerstopped) events to create a custom progress bar for autoplay.

<Admonition type="note">
  If you're using a reactive wrapper for Embla Carousel like
  `embla-carousel-react` and building an autoplay progress bar, you probably
  want to set [playOnInit](/plugins/autoplay/#playoninit) to `false` and call
  the `play` method manually to fully control the timing.
  <br />
  This is because the autoplay plugin will start playing as soon as it's
  initialized, which might not be what you want in these cases.
</Admonition>

---

## Events

Below follows an exhaustive **list of all** `Autoplay` **events** together with information about how they work.

---

### autoplay:play

Once: <BrandPrimaryText>`no`</BrandPrimaryText>

Fires when autoplay starts playing. When this event is triggered, the **autoplay timer is active**, and autoplay will select the next scroll snap and start scrolling to it when the [delay](/plugins/autoplay/#delay) has passed.

---

### autoplay:stop

Once: <BrandPrimaryText>`no`</BrandPrimaryText>

Fires when autoplay stops playing. When this event is triggered, the **autoplay timer is not active anymore**.

---

### autoplay:select

Once: <BrandPrimaryText>`no`</BrandPrimaryText>

Fires directly after autoplay selects the next scroll snap and starts scrolling to it.

---

### autoplay:timerset

Once: <BrandPrimaryText>`no`</BrandPrimaryText>

Fires when the autoplay timer is set. As soon as the timer is set, countdown to autoplay to the next scroll snap will begin.

---

### autoplay:timerstopped

Once: <BrandPrimaryText>`no`</BrandPrimaryText>

Fires when the autoplay timer is stopped.

---
